<template>
    <div class="all">
      <div class="guDing">
        <header>
          <div class="div">
          </div>
          <div class="div">
            个人中心
          </div>
          <div class="div" >
          </div>
        </header>
        <div class="personInfo">
          <div class="perIndoPhoto">
            <van-image
              v-if="PHOTO !== null && PHOTO !== '' && PHOTO !== undefined"
              round
              width="60px"
              height="60px"
              fit="cover"
              :src="PHOTO"
            />
            <van-image
              v-else
              round
              width="60px"
              height="60px"
              fit="cover"
              :src="require('../../assets/男患者@2x.png')"
            />
            <div class="sex">
              <img src="../../assets/男.png" v-show="sex === 1" alt="">
              <img src="../../assets/女.png" v-show="sex === 2" alt="">
            </div>
          </div>
          <div class="personInfo_content">
            <p class="name" style="display: flex;align-items: center">{{name}}
              <span @click="undateInfo()"
                    style="background: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.5);
                    border-radius: 2px;
                    font-size: 11px;
                    padding: 3px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 75px;height: 20px;
                    margin-left: 8px;
                    color: rgba(255, 255, 255, 0.9);
"
              >修改资料 <img style="width: 10px;height: 10px;margin-left: 5px" src="../../assets/修改资料.png" alt=""></span>
            </p>
            <p class="phone">{{phone}}</p>
          </div>
          <div class="codeDiv">
            <p>
              <img src="../../assets/角色.png" style="width: 18px;height: 18px;" alt="">
              <span v-show="role === 1">普通用户</span>
              <span v-show="staff_type === 1 && role === 2">家庭医生</span>
              <span v-show="staff_type === 2 && role === 2">康复医生</span>
              <span v-show="staff_type === 3 && role === 2">临床医生</span>
              <span v-show="staff_type === 4 && role === 2">临床医师</span>
              <span v-show="staff_type === 5 && role === 2">康复治疗师</span>
              <span v-show="staff_type === 6 && role === 2">照护师</span>
              <span v-show="staff_type === 7 && role === 2">康复护士</span>
              <span v-show="staff_type === 8 && role === 2">临床护士</span>
              <span v-show="staff_type === 9 && role === 2">健康管理师</span>
            </p>
            <p>
              <button @click.stop="qiehuan()"><img src="../../assets/切换角色.png" alt="">切换角色</button>
            </p>
          </div>
<!--          <div  @click="clickCode()" class="codeDiv" style="display: none">-->
<!--            <img class="code" src="../../assets/code.png" alt="">-->
<!--            <span style="">扫码请点击</span>-->
<!--          </div>-->
        </div>
       <!-- <div class="MyOrder">
          <div class="orderTop">
            <span class="orderTitle">我的订单</span>
            <span class="orderMore" @click="myOrderMore()">
                全部订单
                <img src="../../assets/更多灰@2x.png" alt="">
              </span>
          </div>
          <div class="orderContent">
            <ul>
              <li v-for="(item, index) in menuArr" :key="index" @click="clickMyorder(item.count, item.ID)">
                <van-badge :content="item.count" max="99" v-if="Number(item.count) > 0">
                  <div class="child" >
                    <img :src="item.img" alt="">
                  </div>
                </van-badge>
                <van-badge v-else>
                  <div class="child" >
                    <img :src="item.img" alt="">
                  </div>
                </van-badge>
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div>-->
      </div>
<!--      <div class="content">-->
        <div class="divList" v-for="(item, index) in liArr" :key="index">
          <div class="listTop">
            <a class="hengGang"></a>
            <span style="margin: auto 8px">{{item.title}}</span>
            <a class="hengGang"></a>
          </div>
          <div class="listCon">
            <li class="li"
                v-show="liItem.role === '' || Number(liItem.role) === Number(role)"
                @click="clickLi(liItem.url, liItem.userid, liItem.MZHM)"
                v-for="(liItem, liIndex) in item.list"
                :key="liIndex">
              <span>
                <img :src="liItem.img" class="liImg" alt="">
                <span style="margin-right: 5px">{{liItem.name}}</span>
                <van-badge :content="unSignNum" max="99" v-show="liItem.name === '我的待签约' && Number(unSignNum) > 0" />
              </span>
              <img style="width: 7px;height: 13px;" src="../../assets/更多灰@2x.png" alt="">
            </li>
          </div>
        </div>
<!--        <div class="divList" style="height: 44px;display: flex;align-items: center;justify-content: center">-->
<!--          <li  class="liBottom">-->
<!--            <img style="width: 18px;height: 18px;margin-right: 8px" src="../../assets/切换角色.png" alt="">-->
<!--            <span style="font-size: 16px;-->
<!--color: #333;">切换角色</span>-->
<!--          </li>-->
<!--        </div>-->
        <div class="divList" style="height: 44px;display: flex;align-items: center;justify-content: center">
          <li @click="Exit()" class="liBottom">
            <img style="width: 18px;height: 18px;margin-right: 8px" src="../../assets/退出按钮.png" alt="">
            <span style="font-size: 16px;
color: #EB6100;">退出登录</span>
          </li>
        </div>
<!--      </div>-->
      <div class="bottom">
        <list-menu></list-menu>
      </div>
      <van-dialog v-model="delshow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认退出登录吗？"
                  @confirm="delConfirm()"
                  show-cancel-button>
      </van-dialog>
    </div>
</template>

<script>
import listMenu from '../../components/Vue/ListMenu'
import $ from 'jquery'
import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
// import wx from 'weixin-js-sdk'
export default {
  name: 'My',
  components: {
    'listMenu': listMenu
  },
  data () {
    return {
      name: '',
      sex: 0,
      phone: '',
      shenfenzhenghao: '',
      titleImg: videoHttp.imgHttp, // 头像图片前缀
      unSignNum: 0,
      personInfo: [],
      PHOTO: '',
      menuArr: [
        {
          name: '待接单',
          img: require('../../assets/wodedaijiedan.png'),
          count: 0,
          ID: 2
        },
        {
          name: '待服务',
          img: require('../../assets/wodedaifuwu.png'),
          count: 0,
          ID: 3
        },
        {
          name: '待评价',
          img: require('../../assets/wodedaipignjia.png'),
          count: 0,
          ID: 4
        },
        {
          name: '已完成',
          img: require('../../assets/selectImg/wodeyiwancheng.png'),
          count: 0,
          ID: 5
        }
      ],
      liArr: [
        {
          title: '我的二维码',
          list: [
            {
              name: '添加好友码',
              img: require('../../assets/我的二维码.png'),
              url: '/myErCode',
              role: ''
            },
            {
              name: '档案管理授权码',
              img: require('../../assets/我的授权码.png'),
              url: '/fileInformationList',
              role: '1'
            },
            {
              name: '档案限时调阅码',
              img: require('../../assets/我的健康码.png'),
              url: '/filesErweima',
              role: '1'
            },
            {
              name: '形成联系码',
              img: require('../../assets/我的建档码.png'),
              url: '/doctorQr',
              role: ''
            },
            {
              name: '团队/机构建档码',
              img: require('../../assets/我的机构建档码.png'),
              url: '/SelectTeamOrOrgan',
              role: '2'
            },
            {
              name: '我的授权管理',
              img: require('../../assets/我的授权管理.png'),
              url: '/MyEmpowerDoctor',
              role: '1'
            }
          ]
        },
        {
          title: '健康服务',
          list: [
            {
              name: '我的个人计划',
              img: require('../../assets/我的个人计划.png'),
              url: '/PatientsTable',
              role: '1'
            },
            {
              name: '我购买的服务',
              img: require('../../assets/我购买的服务.png'),
              url: '#',
              role: '1'
            }, {
              name: '我的订单',
              img: require('../../assets/我的订单.png'),
              url: '/PatientAllOrder',
              // url: '/allOrder',
              role: '1'
            },
            {
              name: '我的订单',
              img: require('../../assets/我的订单.png'),
              url: '/DoctorAllOrder',
              // url: '/AllDoctorOrder',
              role: '2'
            },

            {
              name: '我提供的服务',
              img: require('../../assets/我的服务包.png'),
              url: '/teamPriceList',
              // url: '/servicePackList',
              role: '2'
            },

            {
              name: '我的排班',
              img: require('../../assets/我的排班.png'),
              url: '/ScheduleListTable',
              role: '2'
            },
            {
              name: '我的服务团队',
              img: require('../../assets/管理我的医生团队.png'),
              url: '/ManageDoctorOrTeam',
              role: '1'
            },
            {
              name: '我的健康档案',
              img: require('../../assets/pc_case.png'),
              url: '/filesXiang',
              role: '1'
            }
          ]
        },
        // {
        //   name: '我的待签约',
        //   img: require('../../assets/pc_uncheck.png'),
        //   url: '/noadd'
        // },
        {
          title: '社交',
          list: [
            {
              name: '我的亲属',
              img: require('../../assets/我的亲属.png'),
              url: '',
              role: '1'
            },
            {
              name: '我的好友',
              img: require('../../assets/我的好友.png'),
              url: '/myFriends',
              role: ''
            },
            {
              name: '我的朋友圈',
              img: require('../../assets/我的朋友圈.png'),
              url: '/groupFriends',
              role: ''
            }
          ]
        },
        {
          title: '招聘求职',
          list: [
            {
              name: '我的招聘',
              img: require('../../assets/我的招聘 (2).png'),
              url: '/zhao',
              role: ''
            },
            {
              name: '我的求职',
              img: require('../../assets/pc_wanted.png'),
              url: '/qiu',
              role: ''
            }
          ]
        },
        {
          title: '系统设置',
          list: [
            {
              name: '实名认证',
              img: require('../../assets/实名认证.png'),
              url: '/CareerInformation',
              role: '2'
            }, {
              name: '隐私保护',
              img: require('../../assets/隐私保护.png'),
              url: '/privacySettings',
              role: ''
            }
          ]
        },
        // {
        //   name: '服务价格维护',
        //   img: require('../../assets/服务价格维护.png'),
        //   url: '/priceList',
        //   role: ''
        // }
        {
          title: '常用工具',
          list: [
            {
              name: '联系客服',
              img: require('../../assets/pc_custom.png'),
              url: '#',
              role: ''
            }
          ]
        }
      ],
      /*    {
      name: '我的随笔',
        img: require('../../assets/我的随笔.png'),
      url: '/informalEssay',
      role: ''
    }, */
      mzhm: '',
      userid: '',
      delshow: false,
      role: '',
      staff_type: '',
      STAFF_ID: '',
      staff_status: ''
    }
  },
  mounted () {
    // 实名认证
    sessionStorage.removeItem('realNameData')

    // 机构/团队建档码
    sessionStorage.removeItem('TeamOrganCode')

    // 我的订单的头部菜单
    sessionStorage.removeItem('allOrderActive')
    this.getInfo()
    this.getNumber()
    // $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
  },
  methods: {
    qiehuan () {
      Toast('正在开发中,敬请期待...')
    },
    pay () {
      this.getApi()
    },
    getApi () {
      this.$http.getweixinjs()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            console.log(res.data.data.appId)
            window.WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                'appId': res.data.data.appid, // 公众号名称，由商户传入
                'timeStamp': res.data.data.timestamp, // 时间戳，自1970年以来的秒数
                'nonceStr': res.data.data.nonceStr, // 随机串
                'package': 'prepay_id=wx201222229874569b201de80e089456213',
                'signType': 'RSA', // 微信签名方式：
                'paySign': '70EA570631E4BB79628FBCA90534C63FF7FADD89' // 微信签名
              },
              function (res) {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }
              })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 退出登录
    delConfirm () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('exit', {'param': ''}, function (responseData) {})
      } else {
        window.location.href = '../../../kfhl/frontlogin/lu'
      }
    },
    Exit () {
      this.delshow = true
    },
    // 获取数字
    getNumber () {
      this.$http.getRemindCount()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            console.log(res.data)
            // this.menuArr[0].count = res.data.data.a
            this.menuArr[0].count = res.data.data.b
            this.menuArr[1].count = res.data.data.c
            this.menuArr[2].count = res.data.data.d
            this.menuArr[3].count = res.data.data.e
            this.unSignNum = res.data.data.unSignNum
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击二维码
    clickCode () {
      // window.location.href = '../../../kfhl/miniindex/mycode.do?userid=' + this.userid
      this.$router.push({path: '/erWeiMa', query: {'shenfenzhenghao': this.shenfenzhenghao, 'userid': this.userid}})
    },
    // 订单
    clickMyorder (count, id) {
      this.$router.push({path: '/myOrder', query: {'MARK': id}})
      // window.location.href = '../../../kfhl/orders/myOrder.do?MARK=' + id + '&userid=' + this.userid
    },
    // 更多订单
    myOrderMore () {
      this.$router.push({path: '/myOrder', query: {'MARK': 0}})
      // window.location.href = '../../../kfhl/orders/myOrder.do?userid=' + this.userid
    },
    clickLi (url) {
      let query = {
        userid: this.userid
      }
      // http://192.168.0.151:8080/#/PatientsTable?userid=d31eb7c0398d488ea1ba61ec46db0c1a&team_id=17&patient_user_id=d31eb7c0398d488ea1ba61ec46db0c1a&title=%E4%B8%AA%E4%BA%BA%E8%AE%A1%E5%88%92
      if (url.substring(0, 1) === '.') {
        if (url === '../../../kfhl/jjkf/address.do?userid=') {
          window.location.href = url + this.userid
        } else {
          window.location.href = url
        }
        return false
      } else if (url === '/PatientsTable') {
        query.patient_user_id = this.userid
        query.title = '我的个人计划'
      } else if (url === '/fileInformationList') {
        query.data_user_id = this.userid
      } else if (url === '/MyEmpowerDoctor') {
        query.oauth_data_user_id = this.userid
        // this.$router.push({path: url, query: {userid: this.userid, oauth_data_user_id: this.userid}})
      } else if (url === '/filesXiang') {
        query.show = 1
        // this.$router.push({path: url, query: {userid: this.userid, show: 1}})
      } else if (url === '/doctorQr') {
        // this.$router.push({path: url, query: {userid: this.userid}})
      } else if (url === '/teamPriceList') {
        sessionStorage.setItem('type', 1)
        query.showNav = 1
        query.isAll = 1
        // this.$router.push({path: url, query: {userid: this.userid, showNav: 1, isAll: 1}})
      } else if (url === '/CareerInformation') {
        if (this.staff_status !== undefined && this.staff_status !== null && this.staff_status !== '') {
          if (Number(this.staff_status) === 0) {
            Toast('您已完成实名认证，请勿重复认证')
            return false
          } else if (Number(this.staff_status) === 2) {
            Toast('您提交的实名认证信息正在审核中')
            this.$router.push({path: '/Verification', query: {userid: this.userid, STAFF_ID: this.STAFF_ID}})
            return false
          } else if (Number(this.staff_status) === 3) {
            Toast('您提交的实名认证信息审核不通过，请重新提交')
            this.$router.push({path: url, query: {userid: this.userid}})
            return false
          }
        }
        // else {
        //   this.$router.push({path: url, query: {userid: this.userid}})
        // }
      } else if (url == '#') {
        Toast('该功能正在开发中...')
        return false
      }
      // else if (url.substring(0, 1) === '/') {
      //     this.$router.push({path: url, query: {userid: this.userid}})
      //   }
      this.$router.push({path: url, query: query})
    },
    // 在线咨询
    zixun () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('onLineService', {'param': ''}, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    undateInfo () {
      // if (sessionStorage.getItem('sys') === 'ANDROID') {
      //   window.WebViewJavascriptBridge.callHandler('updatePersonalInfo', {'param': ''}, function (responseData) {})
      // } else {
      //
      // }
      this.$router.push({path: '/personInfo', query: {userid: this.userid}})
      // 修改资料 updatePersonalInfo
    },
    getInfo () {
      this.$http.findPersonal()
        .then(res => {
          console.log(res)
          this.name = res.data.name
          this.sex = res.data.sex
          this.phone = res.data.phone
          this.PHOTO = res.data.PHOTO
          this.shenfenzhenghao = res.data.shenfenzhenghao
          this.mzhm = res.data.MZHM
          this.userid = res.data.userid
          this.role = res.data.role
          this.staff_type = Number(res.data.staff_type)
          this.STAFF_ID = res.data.STAFF_ID
          this.staff_status = res.data.staff_status
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  destroyed () {
    sessionStorage.removeItem('type')
    sessionStorage.removeItem('del_tag')
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
}
  li{
    list-style: none;
  }
  .hengGang{
    display: block;
    width: 15px;
    height: 2px;
    background: linear-gradient(90deg, #2F9EE5, #2FD6F2);
    border-radius: 2px;
  }
  .all{
    width: 100%;
    height: 100%;
    font-family: PingFang SC;
    overflow: auto;
    background: #FAF9FE;
  }
  .guDing{
    /*background: url("../../assets/homeBackground.png") no-repeat top;*/
    /*background-size: 100% 65%;*/
    background: #1DA4F2;
    position: sticky;
    top: 0;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  header .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  header .div:nth-child(2){
    justify-content: center;
  }
  header .div:nth-child(3) span{
    margin-right: 15px;
  }
  .content{
    width: 100%;
    overflow: auto;
  }
  .personInfo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    color: #FFFFFF;
  }
  .personInfo_content{
    width: 80%;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .perIndoPhoto{
    position: relative;
  }
  .personInfo .photo{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .sex{
    position: absolute;
    bottom: 0px;
    right: 5px;
    z-index: 999;
  }
  .sex img{
    width: 15px;
    height: 15px;
  }
  .codeDiv{
    min-width: 100px;
    display: flex;
    /*flex-direction: column;*/
    /*justify-content: center;*/
    align-items: center;
    flex-direction: column;
  }
  .codeDiv p{
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
  }
  .codeDiv button{
    width: 100px;
    height: 23px;
    border-radius: 11px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1da4f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #FFFFFF;
  }
  .codeDiv button img{
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .codeDiv span{
    color: white;
    font-size: 15px;
    /*margin-left: 5px;*/
    font-weight: bold;
    white-space: nowrap;
  }
  .code{
    width: 35px;
    height: 35px;
  }
  .personInfo p{
    margin-bottom: 8px;
  }
  .name{
    font-size: 16px;
    font-weight: bold;
  }
  .phone{
    font-size: 14px;
    font-weight: 500;
  }
  .MyOrder, .divList{
    width: 92%;
    margin: 10px auto;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .divList:last-child{
    margin-bottom: 10px;
  }
  .liBottom{
    display: flex;
    align-items: center;
  }
  .MyOrder{
    height: 124px;
  }
  .orderTop, .listTop{
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 17px;
  }
  .orderTop{
    justify-content: space-between;
  }
  .orderTop{
    border-bottom: 1px solid #E5E5E5;
  }
  .orderTop img{
    width: 7px;
    height: 13px;
  }
  .orderTitle {
    color: #333333;
  }
  .orderMore{
    color: #999;
  }
  .orderContent{
    height: 80px;
  }
  .orderContent img{
    width: 24px;
    height: 23px;
  }
  .orderContent ul{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .orderContent ul li{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #555555;
  }
  .child {
    width: 24px;
    height: 23px;
    /*background: #f2f3f5;*/
    border-radius: 4px;
    margin-bottom: 5px;
  }

  .liImg{
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
  .divList .li:last-child{
    border-bottom: none;
  }
  .li{
    width: 95%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    color: #1A191A;
    border-bottom: 0.05px solid #E5E5E5;
    margin: 0 auto;
  }
  .li span{
    display: flex;
    align-items: center;
  }
</style>
